/** @jsxImportSource @emotion/react */
import {  css } from "@emotion/react";
import * as React from "react";
import {
  useTheme, TwoHalfFrame,
} from "customize-easy-ui-component";

//import { useSession,  useSignOut } from "../auth";
//import { Link as RouterLink, useRoute, useLocation, Switch, Route } from "wouter";
//import { TaskList } from "./task/TaskList";
//import { DeviceList } from "./DeviceList";
//import { useCountOfTask } from "./db";
import {UserContext} from "../routing/UserContext";
import useLogoutMutation from "../common/useLogoutMutation";
import {useCallback, useContext, useRef} from "react";
import RoutingContext from "../routing/RoutingContext";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import { PipingUnitEsMainQuery } from "./__generated__/PipingUnitEsMainQuery.graphql";
import { PipingUnitEsListParent } from "./PipingUnitEsList";
// import {TwoHalfFrame} from "../../UiDebugSave/sample/TwoHalfFrame";
//找不到类型定义！ @types/babel-plugin-relay 没提供TS支持
//import {graphql} from 'relay-runtime';  //实际数据可以发起并获得到，可惜babel报错，纯粹不允许？
const graphql = require("babel-plugin-relay/macro");    //编译器解析graphql文本代码。


interface DeviceMainProps {
    prepared: {
        myQuery: PreloadedQuery<PipingUnitEsMainQuery>;
        filter: any     //传递本列表的过滤参数
    }
    children: React.ReactNode;
    id?: string;
    routeData: any;
}


export default function PipingUnitEsMain(props: DeviceMainProps) {
    //第一次啊运行吗？
    // const mountedRef = useRef(false);
    // if(!mountedRef.current) {
    //     mountedRef.current = true;
    //     console.log("加载初始化DeviceMain期间:",props,"filter=",props.prepared.filter);
    // }
  const theme = useTheme();
  //const {user} = useSession();
    const {user, setUser} =useContext(UserContext);
 // const qs = queryString.parse(window.location.search);
  //const {filter:devfl, } =React.useContext(DevfilterContext);
 // const [, params] = useRoute("/device/:recipe*");
    const { isExact }=props.routeData;
    const {history } = useContext(RoutingContext);
  let showingRecipe =history.location.pathname; // params?.recipe;
  let initTab=0;

  // const [activeTab, setActiveTab] = React.useState(initTab);

  const { call:signOut } = useLogoutMutation();
  //const { item:sumofTask,  } = useCountOfTask({dep:"", status:""} );
 // const { item:sumofTask,  } ={item: 3045};
    //必须把下面的挂接片段的参数集中放在这里引入的。参数按照出现顺序排列：参数在3个地方出现。
    //前端必选after参数为空的：也会送到后端再后端抛异常 Object required to be not null; 参数定义了却没用到也会编译报错！
    //【小心阻碍点】下层Fragment嵌入带来的参数也必须在这里定义啊，不能放在下层定义参数，需提前声明参数。一个graphQL请求包只能套一个query,不允许多个query{}存在的！约束啊。
   //这里不能和下层次共同定义一个同名字参数的，编译报错。最后办法：除非后端提供接口能够接受两个参数充当同一个实际参数功能，奇怪！。
   //Relay要求的提前汇聚加载数据的模式只能这样了；需提前定义参数名以及提早赋予参数数值。
    //【特别注意！】下面usePreloadedQuery之后跟随的代码：执行次数比在前面的代码执行次数少！也就是Hook可以更改代码流程，可能提前返回return()给上一级组件了？
  const data = usePreloadedQuery<PipingUnitEsMainQuery>(
      graphql`
          query PipingUnitEsMainQuery($where:PipingUnitInput, $after:String,$first:Int=10,$orderBy:String,$asc:Boolean
          ) {
          ...PipingUnitEsList 
        }
      `,
      props.prepared.myQuery,
  );
  //const { countTask:sumofTask,  }=data;

    React.useEffect(() => {
        console.log("PipingUnitEsMain金准 props.prepared变动=" ,props,"history", history);
    }, [signOut, props, history,user]);

    console.log("DeviceMain金准 graphql入口data=" ,data);

  return (
    <TwoHalfFrame rightPanel={props.children}>
        <PipingUnitEsListParent eqps={data} filter={props.prepared.filter}/>
    </TwoHalfFrame>
  );
};

//路由动态加载的组件必须有default的
//export default DeviceMain;
//使用<Tabs/》 <Stack/  </StackItem>组件进行的装配的实际还是同一个URL pathname,在里面点击切换其实还是局部视图切换，没有涉及到路由器，自然不会引起组件卸载和加载，算同一个大组件状态保留的。

